import React, {useEffect, useState} from "react";
import mock from 'mockjs';
import http from "@/common/http";
import ReactMarkdown from 'react-markdown';
import mammoth from 'mammoth';
import {Card} from 'antd';
import gfm from 'remark-gfm'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
// 代码高亮主题风格, vscDarkPlus vscode 暗色主题,  darcula  webstorm 暗色主题
import {vscDarkPlus, darcula, dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
import SyntaxHighlight from "@/components/Markdown/SyntaxHighlight";
import OmsMarkdown from "@/components/Markdown/OmsMarkdown";


const Welcome: React.FC<any> = (props) => {

  const [mdContent, setMdContent] = useState<string>('')

  const onClick = () => {
    var url = '/auth/oauth/authorize'
    const vehicle = mock.mock(url, 'post', (req: any, res: any) => {
      return {
        code: 200,
        data: [{
          id: 1,
          name: 'byd',
        }, {
          id: 1,
          name: 'baojun',
        }],
        message: '查询成功'
      }
    })
    http.post(url).then(res => {
      console.log(res)
    })
  }

  const onClick2 = () => {
    console.log(import.meta.env.VITE_SOME_KEY)
    var url = '/api2/getUserInfo'
    http.post(url).then(res => {
      console.log(res)
    })
  }

  useEffect(() => {
    http.get('/v1/app/md').then(res => {
      setMdContent(res.data)
    })
  }, [])


  const textContent = `
# 项目简介
本项目后端使用gin、gorm和ssh、sftp开发。旨在编写一个轻量，易用，多平台的运维项目。
前端使用react、typescript、vite构建。
现阶段目的是做一个阉割版的xshell并简单的实现ansible或者saltstack的部分功能。

![avatar](http://localhost:8080/Image/11623753869_.pic.jpg)

### 目前已经实现的功能
1. 隧道, 类似ssh的-L和-R
2. cron任务和长进程的管理
3. ssh命令批量执行
4. 文件批量的上传 流式传输支持大文件
5. 基于sftp文件浏览器

### 查看后端代码请移步到 [oms](https://github.com/ssbeatty/oms)`;

  const textContent2 = 'console.log(1);\n\nvar a=1;'

  return (
    <div style={{textAlign: 'left'}}>
      <SyntaxHighlight textContent={textContent2} language={'javascript'}/>

      <OmsMarkdown textContent={mdContent}/>

      {/*  <ReactMarkdown components={components} remarkPlugins={[gfm]}>
        {mdContent}
      </ReactMarkdown>*/}
    </div>
  )
}


export default Welcome
